/**
 * @description
 * @author ybjuejue
 * @createDate 2018/12/28/028
 */
;(function (_) {
    _.dialog.loading({status: 'global'});
    console.log(_.h5lbs);
    var userAuth = {
        hasAttendance: true,
        hasRailSet: true,
        hasLbsMap: false,
        hasOwnStatistic: true,
        hasDeptStatistic: false,
    };
    pageFooterRender();
    statisticsPageRender();
    clockPageRender();

    function createPicker(callback, opt) {
        var now = $clock.getDate();
        var opts = opt || {};
        var value = opts.value;
        var type = opts.type;
        type = type ? type : "month";
        var picker = new cmp.DtPicker({
            type: type ? type : "month",
            beginYear: (now.year - 1),
            endYear: now.year,
            value: value || (type === 'month' ? now.fullMonth : now.today)
        });
        picker.show(function (result) {
            var oldvalue = result.value;
            result.value = result.value.replace(/-/g, '.');
            callback && callback(result, oldvalue);
            picker.dispose();
        });
    }


    function clockPageRender() {
        $clock.life('#clock-page', {
            $webviewListener: {},
            $onloaded: function () {
                this.initEvent();
                this.getGpsInfo();
                this.getClockInfo(function () {
                    this.render();
                });
                this.getMapInfo();
                this.getWifiStatus(true);
                this.renderMapView()
            },
            $onPageHiddenShow: function (e) {
                this.getWifiStatus(e)
            },
            $componentNeedApi: {
                js: [$clock.getPath('/js/cmp-lbs.js', 'cmp')]
            },
            methods: {
                data: {
                    mapInfo: {},
                    map: null,
                    list: [],
                    positionInfo: {
                        wifi: null,
                        distance: null,
                        gps: null,
                        regwifi: null,
                        reggps: null
                    },
                    clockInfo: null,
                    wifiTimer: null
                },
                initEvent: function () {
                    var component = this;
                    this.$dom.on('tap', '.out-clock-link', function () {
                        console.log('点击了去外勤签到');
                        $clock.open($clock.path.outclock);
                    });
                    this.$dom.on('tap', '.localResult', function () {
                        console.log('点击了去外勤签到');
                        $clock.open($clock.path.outclock);
                    });
                    this.$dom.on('tap', '.clocking-button', function () {
                        console.log('点击了打卡')
                    })
                    this.$dom.on('tap', '.again-text-button', function () {
                        console.log('重新打卡')
                    })
                    this.$dom.on('tap', '.clock-map-warp .month-button', function () {
                        $clock.open($clock.path.clockPersonMonthDetail);
                    })
                    this.$dom.on('tap', '.clock-map-warp .local-button', function () {
                        component.getGpsInfo();
                    })
                },
                checkIsInClockDistance: function (value, type) {
                    var data = this.data;
                    var mapInfo = data.mapInfo;
                    if (!mapInfo) {
                        return
                    }
                    var wifis = mapInfo.wifis || [];
                    var lbsRails = mapInfo.lbsRails || [];
                    if (type in data.positionInfo) {
                        data.positionInfo[type] = value
                    }
                    data.positionInfo.regwifi = null;
                    data.positionInfo.reggps = null;
                    data.positionInfo.distance = null;
                    var map = data.map;
                    var gps = data.positionInfo.gps;
                    var wifi = data.positionInfo.wifi;
                    if (wifi) {
                        for (var i = 0; i < wifis.length; i++) {
                            if (wifis[i].macAddress === wifi.mac && wifis[i].wifi === wifi.ssid) {
                                data.positionInfo.regwifi = wifis[i].wifi
                            }
                        }
                    }
                    if (gps) {
                        for (var i = 0; i < lbsRails.length; i++) {
                            var point = [lbsRails[i].longitude, lbsRails[i].latitude];
                            var nowPoint = [gps.longitude, gps.latitude];
                            var distance = null;
                            var dis = data.positionInfo.distance;
                            if (map) {
                                distance = map.distance(point, nowPoint)
                            }
                            if (typeof distance === 'number' && distance < lbsRails[i].range && (dis === null || distance < dis)) {
                                data.positionInfo.reggps = lbsRails[i];
                                data.positionInfo.distance = distance
                            }
                        }
                    }
                    if ((!wifis.length) && (!lbsRails.length)) {
                        data.positionInfo.regwifi = wifi || null;
                        data.positionInfo.reggps = gps || null;
                    }
                    this.renderClockView()

                },
                renderMapView: function () {
                    _.h5lbs.gdMap(this.$dom.find('#map-warp')[0], {
                        success: function (e) {
                            console.log(e)
                        },
                        error: function (e) {
                            console.log(e)
                        }
                    })
                },
                renderClockView: function () {
                    // console.log(this.data.positionInfo)
                },
                getClockInfo: function () {
                    var component = this;
                    $clock.sdk.getIndexClockInfo({
                        success: function (res) {
                            console.log(res);
                            var data = res.data || {};
                            component.data.clockInfo = data.info || {};
                            component.data.list = data.punchArea || [];
                            component.render();
                        },
                        error: function (e) {
                            component.render();
                            console.error(e)
                        }
                    })
                },
                getMapInfo: function () {
                    var component = this;
                    $clock.sdk.getMapInfo({
                        success: function (res) {
                            component.data.mapInfo = res.data;
                            component.$dom.find('#map-month-date').text(
                                $clock.getDate().fullDate + ' ' + $clock.getDate().weekday
                            )
                        },
                        error: function (e) {
                            component.$dom.find('#map-month-date').text(
                                $clock.getDate().fullDate + ' ' + $clock.getDate().weekday
                            )
                        }
                    })
                },
                getGpsInfo: function () {
                    var component = this;
                    component.$inject(function () {
                        _.h5lbs.getCurrentPosition({
                            mode: 1,
                            success: function (e) {
                                var res = e.coordinate || null;
                                component.checkIsInClockDistance(res, 'gps');
                                if (res) {
                                    component.buildMapView(res)
                                }
                            },
                            error: function (e) {
                                component.checkIsInClockDistance(null, 'gps');
                            }
                        })
                    });
                },
                buildMapView: function (v) {
                    var component = this;
                    var map = component.data.map;
                    var curPos = [parseFloat(v.longitude), parseFloat(v.latitude)];
                    if (map) {
                        // map.setCurPos({
                        //     pos: curPos
                        // })
                    } else {
                        // component.data.map = _.lbs.gdMap({
                        //     showCurPos:true,
                        //     center: curPos
                        // })
                    }
                },
                getWifiStatus: function (begin) {
                    var component = this;
                    if (!_.platform.CMPShell) {
                        begin = false
                    }
                    if (component.data.wifiTimer) {
                        clearInterval(component.data.wifiTimer);
                        component.data.wifiTimer = null
                    }
                    if (begin) {
                        cordova.exec(function (res) {
                            component.checkIsInClockDistance(res || null, 'wifi');
                        }, function (e) {
                            component.checkIsInClockDistance(null, 'wifi');
                        }, 'NetworkStatus', 'getWifiInfo', [], false);
                        component.data.wifiTimer = setInterval(function () {
                            cordova.exec(function (res) {
                                component.checkIsInClockDistance(res || null, 'wifi');
                            }, function (e) {
                                component.checkIsInClockDistance(null, 'wifi');
                            }, 'NetworkStatus', 'getWifiInfo', [], false);
                        }, 2000);
                    }

                },
                render: function () {
                    var component = this;
                    cmp.dialog.loading(false);
                    var string = '';
                    var data = this.data || {};
                    if (data.clockInfo && !data.clockInfo.needPunch) {
                        string = '<div class="clock-detail-zone flex-1 x-center y-center flex-h">\n' +
                            '          <div class="no-need-punch text-over-ellipsis">\n' +
                            '              <p class="icon see-icon-v5-common-back-tips"></p>\n' +
                            '              <p class="tips cmp-font-asswords">您属于无需签到人员</p>\n' +
                            '              <p class="text cmp-font-asswords">如需签到请联系签到管理员加入签到组！</p>\n' +
                            '          </div>\n' +
                            '      </div>'
                    } else if (data.clockInfo && data.clockInfo.needPunch) {
                        if (data.list) {
                            for (var i = 0; i < data.list.length; i++) {

                                var s = '';
                                var item = data.list[i].punchHistoryVO;
                                if (item) {
                                    s += clockResultItemInfo(item)
                                } else {
                                    s = clockButton(data.list[i]);
                                }
                                string += clickHomeListWarp(data.list[i], s)
                            }
                        }
                        string = '<div class="clock-detail-zone clock-list flex-1">\n' +
                            '        <div class="list-warp">\n'
                            + string +
                            '        </div>\n' +
                            '    </div>';
                    }

                    if (string) {
                        if (this.$dom.find('.clock-detail-zone')[0]) {
                            this.$dom.find('.clock-detail-zone').remove();
                        }
                        this.$dom.append($cmp(string));
                    } else {
                        component.$dialog({
                            dom: this.$dom[0],
                            status: "systembusy",
                            text: "系统繁忙",
                            calcHClass: 'clock-map-warp'
                        }, function (e) {
                            console.log('点击了')
                        });
                    }
                }
            }
        });

        function clockResultItemInfo(info) {
            var status = {
                '0': 'normal',
                '1': 'late',
                '2': 'leaveEarly',
                '3': 'missingClock',
                '4': 'outside'
            };
            var className = status[info.attendanceState];
            var address = info.attendanceStatus != 3 ? '<p class="address cmp-font-desc">' + info.sign + '</p>\n' : '';
            var again = info.reSign ? '<span class="again again-text-button">重新打卡</span>' : '';
            return '<div class="info-item">\n' +
                '   <p class="title text-over-ellipsis cmp-font-content">打卡时间 ' + info.signTime + ' <span class="status ' + (className ? 'clock-type-' + className : '') + '">' + $clock.clockTypeMap[className] + '</span>' +
                again +
                '</p>\n' +
                address +
                '</div>'
        }

        function clockButton(info) {
            var data = this.data;
            var d = $clock.getDate();
            var status = getStatus(info);

            function getStatus(info) {
                var isSetWifi = data.mapInfo && data.mapInfo.wifis;
                var isSetGps = data.mapInfo && data.mapInfo.lbsRails;
                var type = 'deny';
                var tips = '';
                var clockText = '';
                var times = $clock.getDate(info.areaTime);
                var nowTimes = $clock.getDate(info.endTime);
                var inOrBack = Number(info.inOrBack);
                if ((isSetGps || isSetWifi) && (data.positionInfo.reggps || data.positionInfo.regwifi)) {
                    var inWifi = data.positionInfo.regwifi;
                    var locaitonInfo = inWifi ? inWifi : data.positionInfo.reggps;
                    tips = '<p class="clocking-title cmp-font-asswords">您已进入签到范围:<span class="' + (inWifi ? 'see-icon-v5-common-WiFi' : 'see-icon-v5-common-location') + '"></span>' + (inWifi ? locaitonInfo.wifi : locaitonInfo.alias) + '</p>'
                    type = 'normal';
                    if (inOrBack) {
                        clockText = '下班打卡';
                        if (times.time < nowTimes.time) {
                            type = 'warning';
                            clockText = '迟到';
                        }
                    } else {
                        clockText = '上班打卡';
                        if (times.time > nowTimes.time) {
                            type = 'warning';
                            clockText = '早退';
                        }
                    }
                } else {
                    type = 'deny';
                    tips = '<p class="clocking-title cmp-font-asswords">您不在打卡范围，请重新定位</p>'
                    clockText = '不在范围';
                }
                return {
                    clockText: clockText,
                    type: type,
                    tips: tips
                }
            }

            return '<div class="item-clocking">\n' +
                '  <div class="clocking-button error flex-h y-center x-center ' + (status.tips.type) + '"><div>' +
                '  <p class="time">' + (d.hoursTime) + '</p><p class="type cmp-font-btn">' + status.clockText + '</p>' +
                '</div></div>\n' +
                status.tips +
                '     <p class="go-out-clock">\n' +
                '       <span class="cmp-font-asswords out-clock-link">去外勤签到 >></span>\n' +
                '     </p>\n' +
                '</div>'
        }

        function clickHomeListWarp(info, str) {
            var clockLevel = [
                '上班打卡',
                '下班打卡'
            ];
            if (!info.curArea && info.punchHistoryVO) {
                str = '<div class="item-clocked-info-list">' + str + '</div>'
            }
            if (!info.curArea && !info.punchHistoryVO) {
                str = ''
            }
            var statusClass = info.curArea ? ' active' : '';
            return '<div class="item-clock' + statusClass + '">\n' +
                '     <div class="item-title"><p class="text-over-ellipsis">' + info.areaTime + '<span class="time-type cmp-font-title"> ' + clockLevel[Number(info.inOrBack)] + '</span></p></div>\n' +
                '     <div class="info-warp">\n' +
                str +
                '     </div>\n' +
                '     <div class="space"></div>\n' +
                '</div>'
        }
    }

    function statisticsPageRender() {
        $clock.life('#statistics-person', {
            $webviewListener: {},
            $onloaded: function () {
                console.log('统计--个人init');
                this.initRender();
                this.initEvent();
                this.getUserMonthData();
            },
            $onPageHiddenShow: function (e) {
                console.log('统计--个人：' + e)
            },
            methods: {
                data: {
                    menuList: [
                        {
                            type: 'normal',
                            title: '正常天数',
                            font: 'normal'
                        },
                        {
                            type: 'rest',
                            title: '休息天数',
                            font: 'normal'
                        },
                        {
                            type: 'nonworkdays',
                            title: '非工作日打卡',
                            font: 'normal'
                        },
                        {
                            type: 'abnormal',
                            title: '异常天数',
                            font: 'normal'
                        },
                        {
                            type: 'late',
                            title: '迟到',
                            font: 'late',
                            numType: 1
                        },
                        {
                            type: 'leaveEarly',
                            title: '早退',
                            font: 'leaveEarly',
                            numType: 1
                        },
                        {
                            type: 'missingClock',
                            title: '缺卡',
                            font: 'missingClock',
                            numType: 1

                        }, {
                            type: 'outside',
                            title: '外勤',
                            font: 'outside',
                            numType: 1
                        }
                    ],
                    lists: null
                },
                getUserMonthData: function () {
                    var component = this;
                    var month = component.$dom.find('.select-month').attr('data-value');
                    $clock.sdk.getUserMonthData(month, {
                        success: function (res) {
                            component.data.lists = res.data;
                            component.render();
                        },
                        error: function () {
                            component.render(true);
                        }
                    })
                },
                initEvent: function () {
                    /*点击数据张开*/
                    var components = this;
                    components.$dom.on('tap', '.list-item .item-title', function () {
                        $cmp(this.parentElement).toggleClass('active')
                    });
                    /*点击月历图标调整*/
                    components.$dom.on('tap', '.go-month-detail', function () {
                        var today = $clock.getDate().today;
                        $clock.open($clock.path.clockPersonMonthDetail + '?date='+ today)
                    });
                    /*点击列表数据的某条进行跳转*/
                    components.$dom.on('tap', '.list-detail-item', function () {
                        var today = $cmp(this).attr('data-time');
                        $clock.open($clock.path.clockPersonMonthDetail + '?date='+ today)
                    });
                    /*点击月历选择时间*/
                    components.$dom.on('tap', '.select-month', function () {
                        var _this = this;
                        var month = $cmp(this).attr('data-value');
                        createPicker(function (result, value) {
                            var selectedDate = result.value;
                            $cmp(_this).attr('data-value', value);
                            _this.innerHTML = selectedDate + ' <span class="see-icon-arrow-plane-down"></span>';
                            components.getUserMonthData();
                        }, {
                            value: month,
                            type: 'month'
                        })
                    })
                },
                initRender: function () {
                    /*页面初始化是渲染页面*/
                    var month = $clock.getDate().fullMonth;
                    this.$dom.find('.select-month').html(
                        month.replace(/-/g, '.') + ' <span class="see-icon-arrow-plane-down"></span>'
                    ).attr('data-value', month);
                },
                render: function (isError) {
                    /*每次获取数据后都去渲染列表*/
                    var component = this;
                    component.$dialog(false);
                    var s = '';
                    var numTypes = ['天', '次'];
                    var menuList = this.data.menuList;
                    var lists = this.data.lists || {};
                    var menuAll = lists.m_info || {};
                    for (var i = 0; i < menuList.length; i++) {
                        var item = menuList[i];
                        if (lists[item.type]) {
                            var list = lists[item.type] || {};
                            var spreadIcon = '<span class="see-icon-arrow-down icon"></span>';
                            var fontClass = item.font || 'normal';
                            var title = item.title;
                            var num = item.numType ? list.account : (list.account + '/' + (menuAll.d_num || 0));
                            num = num + numTypes[item.numType? 1:0];
                            var listDom = '';
                            var itemList = list.list;
                            if (itemList && itemList.length) {
                                listDom += '<div class="item-group">';
                                for (var j = 0; j < itemList.length; j++) {
                                    var date = $clock.getDate(itemList[j].date)
                                    var text = date.today + ' (' + date.weekday + ') ';
                                    listDom += '<p class="cmp-font-title text-over-ellipsis list-detail-item" data-time="' + (date.today) + '"><span>' + text + '</span></p>';
                                }
                                listDom += '</div>'
                            } else {
                                spreadIcon = '';
                            }
                            s += ' <div class="list-item">' +
                                '                      <div class="item-title">' +
                                '                          <div class="warp flex-h x-between y-center"><span class="cmp-font-title title">' + title + '</span>' +
                                '                          <span class="cmp-font-title num clock-type-' + (fontClass) + '">' + num + '</span>' +
                                spreadIcon + '</div></div>' + listDom + '</div>'

                        }
                    }
                    if (s) {
                        this.$dom.find('.list-zone').html(s);
                    } else {
                        component.$dialog(false);
                        var loadingType = [
                            {
                                status: "nocontent",
                                text: "未获取到数据",
                            },
                            {
                                status: "systembusy",
                                text: "系统繁忙",
                            }
                        ]
                        component.$dialog(_.extend({
                            dom: this.$dom.find('.list-zone')[0],
                            calcHClass: 'statistics-person-calcH'
                        }, loadingType[isError ? 1 : 0]));

                    }

                }
            }
        });
        /*20190330 版本暂不开放*/
       /* $clock.life('#statistics-month', {
            $webviewListener: {},
            $onloaded: function () {
                console.log('统计--月init');
                this.initEvent();
                this.render();
            },
            $onPageHiddenShow: function (e) {
                console.log('统计--月：' + e)
            },
            methods: {
                data: {
                    isAllInMonth: false,
                    lists: {
                        late: {
                            title: '迟到',
                            num: '3'
                        },
                        leaveEarly: {
                            title: '早退',
                            num: '3'
                        },
                        missingClock: {
                            title: '缺卡',
                            num: '3'
                        },
                        outside: {
                            title: '外勤',
                            num: 0
                        },
                    }
                },
                initEvent: function () {
                    this.$dom.on('tap', '.list-item .item-title', function () {
                        // $cmp(this.parentElement).toggleClass('active')
                        var type = $cmp(this).attr('data-type');
                        $clock.open($clock.path.clockMonthDetail + '?type=' + type)
                    })
                    this.$dom.on('tap', '.select-month', function () {
                        var _this = this;
                        createPicker(function (result) {
                            console.log(result);
                            var selectedDate = result.value;
                            _this.innerHTML = selectedDate + ' <span class="see-icon-arrow-plane-down"></span>'
                        })
                    })
                },
                render: function () {
                    var s = '';
                    for (var k in this.data.lists) {
                        var item = this.data.lists[k];
                        s += ' <div class="list-item">\n' +
                            '                      <div class="item-title flex-h x-between y-center" data-type="' + k + '">\n' +
                            '                          <span class="cmp-font-title title">' + item.title + '</span>\n' +
                            '                          <span class="cmp-font-title num' + (!item.num ? ' gray' : '') + '">' + item.num + '</span>\n' +
                            '                          <span class="see-icon-arrow-down icon"></span>\n' +
                            '                      </div>\n' +
                            '                  </div>'
                    }
                    if (!this.data.isAllInMonth) {
                        s += '<p class="cmp-font-title tips-in-month">本月考勤尚未结束</p>'
                    }
                    this.$dom.find('.list-zone').html(s);
                }
            }
        });
        $clock.life('#statistics-day', {
            $webviewListener: {},
            $onloaded: function () {
                console.log('统计--日init')
                this.initEvent();
                this.render();
            },
            $onPageHiddenShow: function (e) {
                console.log('统计--日：' + e)
            },
            $componentNeedApi: {
                css: [
                    $clock.getPath('/css/cmp-selectOrg.css', 'cmp'),
                    $clock.getPath('/css/cmp-listView.css', 'cmp')
                ],
                js: [
                    $clock.getPath('/js/cmp-listView.js', 'cmp'),
                    $clock.getPath('/js/cmp-imgCache.js', 'cmp'),
                    $clock.getPath('/js/cmp-selectOrg.js', 'cmp')
                ]
            },
            methods: {
                data: {
                    selectDepartment: {},
                    info: {
                        all: 1000,
                        normal: 999
                    }
                },
                circleTemp: function () {
                    var info = ' <div class="data-info">\n' +
                        '       <p class="text-over-ellipsis cmp-font-desc num"><span>' + this.data.info.normal + '</span>/' + this.data.info.all + '</p>\n' +
                        '       <p class="text-over-ellipsis cmp-font-title title">正常打卡</p>\n' +
                        '   </div>';
                    var percent = this.data.info.all ? (this.data.info.normal || 0) / this.data.info.all : 0;
                    percent = percent > 1 ? 1 : percent < 0 ? 0 : percent;
                    var length = percent * 2 * Math.PI * 70 - (percent < 1 ? 10 * percent : 0);
                    var svg = '';
                    if (percent > 0) {
                        svg = ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,150,150" version="1.1">\n' +
                            '  <circle cx="75" cy="75" r="70" stroke="#1764FF"\n' +
                            '  stroke-linecap="round"\n' +
                            '   stroke-dasharray="' + length + ' ' + ((2 * 70 * Math.PI) - length) + '"\n' +
                            '   stroke-width="10" fill="transparent">\n' +
                            '   <animate attributeName="stroke-dasharray" :from="0" :to="' + length + '" dur="1s"/>\n' +
                            '  </circle>\n' +
                            '</svg>';
                    }
                    return '  <div class="circle-warp flex-h x-center y-center">\n' + info + svg +
                        '</div>';
                },
                initEvent: function () {
                    var component = this;
                    this.$dom.on('tap', '.clock-type-menu .item-warp', function () {
                        $clock.open($clock.path.clockDayDetail + '?type=')
                    });
                    this.$dom.on('tap', '.select-month', function () {
                        var _this = this;
                        createPicker(function (result) {
                            var selectedDate = result.value;
                            console.log(selectedDate);
                            _this.innerHTML = selectedDate + ' <span class="see-icon-arrow-plane-down"></span>'
                        }, {type: 'date'})
                    });

                    this.$dom.on('tap', '.person-num', function () {
                        var _this = this;
                        component.$inject(function (result) {
                            _.selectOrg('#depart-person-num', {
                                selectType: 'department',
                                maxSize: 1,
                                type: 2,
                                fillBackData: component.data.selectDepartment.id ? [component.data.selectDepartment] : [],
                                h5header: true,
                                title: '部门选择',
                                callback: function (v) {
                                    v = JSON.parse(v);
                                    console.log(v);
                                    var result = v.orgResult[0] || {name: '全部部门'};
                                    component.data.selectDepartment = result;
                                    _this.innerHTML = result.name + ' <span class="see-icon-arrow-plane-down"></span>'
                                },
                                closeCallback: function (e) {
                                    _.backbutton.pop();
                                    _.selectOrgDestory('#depart-person-num');
                                }
                            });
                            _.backbutton.push(function () {
                                _.backbutton.pop();
                                _.selectOrgDestory('#depart-person-num')
                            });
                        });
                    })
                },
                render: function () {
                    this.$dom.find('.chart-warp').html('').append($cmp(this.circleTemp())[0])
                }
            }
        });*/

        /*20190330 版本上述代码暂不开放*/
        $clock.life('#statistics-top', {
            $webviewListener: {},
            $onloaded: function () {
                console.log('统计--早到榜init');
                this.initRender();
                this.initEvent();
            },
            $onPageHiddenShow: function (e) {
                console.log('统计--早到榜：' + e)
            },
            methods: {
                data: {
                    fromDate: $clock.getDate($clock.hrefParams.date),
                    lists: [],
                    pageSize: 50,
                    userTop: null
                },
                initEvent: function () {
                    var component = this;
                    component.$dom.on('tap', '.list-item .item-title', function () {

                    });
                    /*点击月历选择时间*/
                    component.$dom.on('tap', '.select-month', function () {
                        var _this = this;
                        var date = $cmp(this).attr('data-value');
                        createPicker(function (result, value) {
                            var selectedDate = result.value;
                            $cmp(_this).attr('data-value', value);
                            _this.innerHTML = selectedDate + ' <span class="see-icon-arrow-plane-down"></span>';
                            component.getTopOneDayData();
                        }, {
                            value: date,
                            type: 'date'
                        })
                    })
                },
                getTopOneDayData: function () {
                    var component = this;
                    var date = component.$dom.find('.select-month').attr('data-value');
                    $clock.sdk.getUserTopList(date, component.data.pageSize,{
                        success: function (res) {
                            component.data.lists = res.data.list || [];
                            component.data.userTop = res.data.self || null;
                            component.render();
                        },
                        error: function () {
                            component.render(true);
                        }
                    })
                },
                initRender: function () {
                    /*页面初始化是渲染页面*/
                    var today = this.data.fromDate.today;
                    this.$dom.find('.select-month').html(
                        today.replace(/-/g, '.') + ' <span class="see-icon-arrow-plane-down"></span>'
                    ).attr('data-value', today);
                    this.$dom.find('.person-num').html('仅显示前'+(this.data.pageSize || 0)+'名数据');
                    this.getTopOneDayData();
                },
                renderListItem: function (info) {
                   var s = '';
                   if (info) {
                     var name = _.member.id === info.memberId ? '我' : info.memberName;
                     var icon = _.seeyonbasepath+"/rest/orgMember/avatar/" + info.memberId + '?maxWidth=200&time='+new Date().getTime();
                     var bg = info.memberId ? 'style="background-image:url('+icon+');"': '';
                     s = ' <div class="top-item flex-h y-center" data-id="'+(info.memberId || '')+'">' +
                         '                      <div class="num-text cmp-font-desc">'+(info.num || '')+'</div>' +
                         '                      <div class="user-header" '+bg+'></div>' +
                         '                      <div class="user-info-zone flex-1 flex-h x-between y-center">' +
                         '                          <div class="user-info">' +
                         '                              <p class="username cmp-font-title">'+(name || '')+'</p>' +
                         '                              <p class="department cmp-font-asswords">'+(info.memberJob || '')+'</p>' +
                         '                          </div>' +
                         '                          <span class="clock-time cmp-font-title">'+(info.time || '')+'</span>' +
                         '                      </div>' +
                         '                  </div>'  
                   }
                   return s;
                },
                renderTopThreeItem: function (info) {
                   var className = ['one', 'two', 'three'];
                   info = info || {};
                    var cl = className[Number(info.num) - 1] || 'display_one';
                    var name = _.member.id === info.memberId ? '我' : info.memberName;
                    var icon = _.seeyonbasepath+"/rest/orgMember/avatar/" + info.memberId + '?maxWidth=200&time='+new Date().getTime();
                    var bg = info.memberId ? 'style="background-image:url('+icon+');"': '';
                    var s = ' <div class="three-item '+cl+'">' +
                        '                          <p class="time">'+(info.time || ' ')+'</p>' +
                        '                          <p class="name cmp-font-title">'+(name || ' ')+'</p>' +
                        '                          <div class="user-info">' +
                        '                              <div class="header" '+bg+'></div>' +
                        '                          </div>' +
                        '                      </div>';
                   return s;
                },
                render: function (isError) {
                    var component = this;
                    var data = component.data;
                    var s = '';
                    var listView  = this.$dom.find('.list-zone');
                    s += component.renderListItem(data.userTop);
                    if (data.lists && data.lists.length) {
                        var tops = data.lists.slice(0, 3);
                        var list = data.lists.slice(3, data.list.length);
                        s += '<div class="top-three-zone"><img src="./../img/topbg.png">';
                        for (var top = 0; top < 3; top++) {
                            var info = tops[top] || {num: top};
                            s += component.renderTopThreeItem(info);
                        }
                        s += '</div></div>';
                        if (list && list.length) {
                            for (var i = 0; i < list.length; i++) {
                                var info = list[i];
                                s += component.renderTopThreeItem(info);
                            }
                        }
                    }
                    if (s) {
                        listView.html(s);
                    } else {
                        component.$dialog(false);
                        var loadingType = [
                            {
                                status: "nocontent",
                                text: "未获取到数据",
                            },
                            {
                                status: "systembusy",
                                text: "系统繁忙",
                            }
                        ]
                        component.$dialog(_.extend({
                            dom: listView[0],
                            calcHClass: 'statistics-top-calcH'
                        }, loadingType[isError ? 1 : 0]));
                    }

                }

            }
        });
        $clock.life('#statistics-page', {
            $webviewListener: {},
            $onloaded: function () {
                this.initEvent();
                this.render();
            },
            $onPageHiddenShow: function (e) {
                console.log('统计' + e)
            },
            $componentNeedApi: {
                css: [$clock.getPath('/css/cmp-picker.css', 'cmp')],
                js: [$clock.getPath('/js/cmp-picker.js', 'cmp'), $clock.getPath('/js/cmp-dtPicker.js', 'cmp')]
            },
            methods: {
                data: {},
                shouldShowPage: function (othis) {
                    var component = this;
                    component.$inject(function () {
                        var pageType = $cmp(othis).attr('data-type');
                        $cmp(othis).parent().addClass('active').siblings().removeClass('active');
                        $cmp('#' + 'statistics-' + pageType).addClass('active').siblings().removeClass('active');
                        $clock.checkShowPage();
                    })
                },
                initEvent: function () {
                    var _this = this;
                    this.$dom.on('tap', '.nav-menu-list .text', function (e) {
                        _this.shouldShowPage(this);
                    })
                },
                render: function () {
                    console.log('统计init');
                    var s = '';
                    if (userAuth.hasDeptStatistic) {
                        s += '<div class="nav-item flex-1 text-center">\n' +
                            '            <div class="text cmp-font-title day-menu" data-type="day">日统计</div>\n' +
                            '        </div>\n' +
                            '          <div class="nav-item flex-1 text-center">\n' +
                            '              <div class="text cmp-font-title month-menu" data-type="month">月统计</div>\n' +
                            '          </div>'
                    }
                    if (userAuth.hasOwnStatistic) {
                        s += '<div class="nav-item flex-1 text-center">\n' +
                            '              <div class="text cmp-font-title person-menu" data-type="person">我的</div>\n' +
                            '          </div>\n' +
                            '          <div class="nav-item flex-1 text-center">\n' +
                            '              <div class="text cmp-font-title top-menu" data-type="top">早到榜</div>\n' +
                            '          </div>'
                    }
                    if (s) {
                        this.$dom.find('.nav-menu-list').html(s);
                        this.shouldShowPage(this.$dom.find('.nav-menu-list .nav-item .text')[0]);
                    }
                }
            }
        });

    }

    function pageFooterRender() {
        $clock.life('#page-footer', {
            $webviewListener: {},
            $onloaded: function () {
                var component = this;
                component.initEvent();
                component.getAuthInfo(function () {
                    component.render();
                    component.$dialog(false);
                });
            },
            methods: {
                dealAuthInfo: function () {
                    var info = [
                        {
                            icon: 'see-icon-clock',
                            activeIcon: 'see-icon-clock-plan',
                            type: 'clock',
                            title: '打卡',
                            key: userAuth.hasAttendance
                        },
                        {
                            icon: 'see-icon-statistics1',
                            activeIcon: 'see-icon-statistics-plan',
                            type: 'statistics',
                            title: '统计',
                            key: userAuth.hasOwnStatistic || userAuth.hasDeptStatistic
                        },
                        {
                            icon: 'see-icon-footmark',
                            activeIcon: 'see-icon-footmark-plan',
                            type: 'foot',
                            title: '足迹分布',
                            key: userAuth.hasLbsMap
                        },
                        {
                            icon: 'see-icon-MySettings',
                            activeIcon: 'see-icon-set-plan',
                            type: 'setting',
                            title: '设置',
                            key: userAuth.hasRailSet
                        }
                    ]
                    return info;
                },
                getAuthInfo: function (callback) {
                    $clock.sdk.getAuthInfo({
                        success: function (res) {
                            console.log(res.data)
                            userAuth = _.extend({}, userAuth, res.data || {});
                            callback && callback();
                        },
                        error: function (e) {
                            console.error(e);
                            callback && callback();
                        }
                    })
                },
                shouldShowPage: function (othis) {
                    var pageType = $cmp(othis).attr('data-type');
                    $cmp(othis).parent().addClass('active').siblings().removeClass('active');
                    $cmp('#' + pageType + '-page').addClass('active').siblings().removeClass('active');
                    $cmp('#page-header-title').html($cmp(othis).attr('data-title') || '');
                    $clock.checkShowPage();
                },
                initEvent: function () {
                    var _this = this;
                    this.$dom.on('tap', '.click-zone', function (e) {
                        _this.shouldShowPage(this);
                    })
                },
                render: function () {
                    var list = this.dealAuthInfo();
                    var s = '';
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].key) {
                            s += '<div class="item">\n' +
                                '            <div class="click-zone ' + list[i].type + '" data-type="' + list[i].type + '" data-title="' + list[i].title + '">\n' +
                                '                <p class="icon-warp">\n' +
                                '                    <span class="icon now ' + list[i].activeIcon + '"></span>\n' +
                                '                    <span class="icon not ' + list[i].icon + '"></span>\n' +
                                '                </p>\n' +
                                '                <p class="title">' + list[i].title + '</p>\n' +
                                '            </div>\n' +
                                '\n' +
                                '        </div>'
                        }
                    }
                    if (!s) {
                        _.notification.alert('无任何权限！', function () {
                            _.href.back();
                        })
                    } else {
                        this.$dom.html(
                            '<div class="flex-1 text-center flex-h x-center y-center">' +
                            s +
                            '</div>').removeClass('display_none').addClass('cmp-loading-footer-bar');
                        this.shouldShowPage(this.$dom.find('.click-zone')[0]);
                    }

                }
            }
        });
    }

    cmp.ready(function () {
        _.asyncLoad.js([
            $clock
        ])
    })
})(window.cmp);